{
    let begin_login = document.querySelector('.login');
    let begin_register = document.querySelector('.register');
    let Login = document.querySelector('.Login');
    let Register = document.querySelector('.Register');
    let ask = document.querySelector('.ask');
    let a = document.querySelector('.a');
    let b = document.querySelector('.b');
    let container = document.querySelector('.container');
    let username = document.querySelector('.username');
    let email_address = document.querySelector('.email_address');
    let password = document.querySelector('.password');
    let password_again = document.querySelector('.password_again');
    let hidden = document.querySelector('.hidden');
    let notice_1 = document.querySelector('#a1');
    let notice_2 = document.querySelector('#a2');
    let notice_3 = document.querySelector('#a3');
    let notice_4 = document.querySelector('#a4');
    // let captcha = document.querySelector('.captcha');
    let tips = document.querySelector('.tips');
    let close = document.querySelector('.close');
    let wti_login = false;
    let wti_register = false;
    let wti_container = false;
    let wti_hidden = false;
    let listf = [
        document.querySelector('.username'),
        document.querySelector('.email_address'),
        document.querySelector('.password'),
        document.querySelector('.password_again')
    ];
    let notice = [
        document.querySelector('#a1 h3'),
        document.querySelector('#a2 h3'),
        document.querySelector('#a3 h3')
    ];
    let notice4 = [
        document.querySelector('#a2 h4'),
        document.querySelector('#a3 h4'),
        document.querySelector('#a4 h4')
    ];
    close.addEventListener('click', function (event) {
        for (index = 0; index < 4; ++index) {
            listf[index].style.borderColor = '';
            if (index != 3) {
                notice[index].style.display = '';
            }
            if (index != 0) {
                notice4[index - 1].style.display = '';
            }
        };
        wti_login = false;
        wti_register = false;
        wti_hidden = false;
        wti_container = false;
        change();
    });
    begin_login.addEventListener('click', function (event) {
        wti_login = true;
        wti_register = false;
        wti_container = true;
        wti_hidden = true;
        document.querySelector('.password input').type = 'password';
        change();
    });
    ask.addEventListener('click', function (event) {
        wti_login = true;
        wti_register = false;
        wti_container = true;
        wti_hidden = true;
        for (index = 0; index < 4; ++index) {
            listf[index].style.borderColor = '';
            if (index != 3) {
                notice[index].style.display = '';
            }
            if (index != 0) {
                notice4[index - 1].style.display = '';
            }
        };
        document.querySelector('.password input').type = 'password';
        change();
    });
    begin_register.addEventListener('click', function (event) {
        wti_login = false;
        wti_register = true;
        wti_container = true;
        wti_hidden = true;
        document.querySelector('.password input').type = 'text';
        change();
    });
    a.addEventListener('click', function (event) {
        wti_login = false;
        wti_register = true;
        wti_container = true;
        wti_hidden = true;
        for (index = 0; index < 4; ++index) {
            listf[index].style.borderColor = '';
            if (index != 3) {
                notice[index].style.display = '';
            }
            if (index != 0) {
                notice4[index - 1].style.display = '';
            }
        };
        document.querySelector('.password input').type = 'text';
        change();
    });
    b.addEventListener('click', function (event) {
        alert("梅开发捏~(￣▽￣)~*");
    });


    function change() {
        if (wti_login) {
            username.style.display = 'flex';
            password.style.display = 'flex';
            Login.style.display = 'flex'
            Login.style.marginTop = '0'
            Register.style.marginTop = '18px'
            tips.style.display = 'flex'
            Register.style.display = 'none';
            email_address.style.display = 'none';
            password_again.style.display = 'none';
            ask.style.display = 'none';
            notice_1.style.display = 'flex';
            notice_2.style.display = 'none';
            notice_3.style.display = 'flex';
            notice_4.style.display = 'none';
            // captcha.style.display = 'none';
        }
        if (wti_register) {
            username.style.display = 'flex';
            password.style.display = 'flex';
            Login.style.display = 'none'
            Login.style.marginTop = '18px'
            Register.style.marginTop = '0'
            tips.style.display = 'none'
            Register.style.display = 'flex';
            email_address.style.display = 'flex';
            password_again.style.display = 'flex';
            ask.style.display = 'flex';
            notice_1.style.display = 'flex';
            notice_2.style.display = 'flex';
            notice_3.style.display = 'flex';
            notice_4.style.display = 'flex';
            // captcha.style.display = 'flex';
        }
        if (wti_hidden) {
            hidden.style.display = 'block';
        } else {
            hidden.style.display = 'none';
        }
        if (wti_container) {
            container.style.display = 'flex';
        }
        else {
            container.style.display = 'none';
        }
    }
}